<template>
	<view class="pl30 pr30 content bgc-fff">
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item
				required 
				label="banner名称" 
				prop="title"
			>
				<u-input 
					v-model="form.title" 
					placeholder="请输入banner名称" 
				/>
			</u-form-item>
			
			<u-form-item
				required
				label="跳转路径" 
				prop="path"
			>
				<u-input 
					v-model="form.path"
					placeholder="格式参照/mapPages/shop_detail/index" 
				/>
			</u-form-item>
			
			<u-form-item
				required
				label="排序" 
				prop="sort"
			>
				<u-input 
					v-model="form.sort"
					 type="number"
					placeholder="请输入排序" 
				/>
			</u-form-item>
			
			<u-form-item 
				required 
				label="图片" 
				prop="url"
			>
				<view style="min-height: 220rpx;">
					<imgUpload
						ref="cover_upload"
						max-count="1"
						@changeSuccess="upLoadImg" 
						@removeImg="removeImg" 
					/>
				</view>
			</u-form-item>
		</u-form>
		
		<footerBottom>
			<view class="pl30 pr30 z-flex z-flex-align-c" style="height: 100%;">
				<view style="width: 100%;">
					<u-button 
						:loading="btnLoading" 
						type="success" 
						:custom-style="customStyle" 
						shape="circle"
						@click="add"
					>
						完成
					</u-button>
				</view>
			</view>
		</footerBottom>
	</view>
</template>

<script>
	import {addBannerApi,getBannerDetailApi} from '@/api/banner.js'
	export default{
		data(){
			return{
				option:{},
				btnLoading: false,
				customStyle: {
					background: '#1abc9c'
				},
				form: {
					title: '测试1',
					sort: 2,
					url: '',
					path: '/mapPages/shop_detail/index'
				},
				rules: {
					title: [{
						required: true,
						message: '请输入联系人名称',
						trigger: ['change', 'blur'],
					}],
					sort: [{
						validator: (rule, value, callback) => {
							return this.form.sort !== ''
						},
						message: '请输入排序',
						trigger: ['change', 'blur'],
					}],
					img: [{
						validator: (rule, value, callback) => {
							return this.form.img.length != 0
						},
						message: '请上传图片',
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		onLoad(option) {
			if(option){
				this.option = option
				option.pageType === 'edit' && this.getBannerDetail()
			}
		},
		methods:{
			upLoadImg(val) {
				let data = val.filter(i => {
					return i.response && i.response.code == 0
				})
				this.$nextTick(() => {
					let url = data.map(i => i.response.data.url)
					this.form.url = url[0]
				})
			},
			removeImg(index) {
				this.form.url = ''
			},
			async getBannerDetail(){
				const {code, data} = await getBannerDetailApi({id: this.option.id})
				if(code != 0) return
				this.form = data
				this.$nextTick(()=>{
					const coverUrl = [{url: data.url}]
					this.$refs.cover_upload.fileList = coverUrl
				})
			},
			add() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						this.btnLoading = true
						try {
							let dataInfo = JSON.parse(JSON.stringify(this.form))
							dataInfo.sort = Number(dataInfo.sort)
							if(this.option.pageType == 'add'){
								let {code, data} = await addBannerApi(dataInfo)
								this.btnLoading = false
								if (code != 0) return
								uni.showModal({
									title: '新增成功',
									content: '请等待列表的刷新',
									confirmText: '我知道咯',
									showCancel: false,
									success: (res) => {
										uni.$u.route({
											type: 'navigateBack'
										})
									}
								});
							}else{
								dataInfo.id = Number(this.option.id)
								let {code,data} = await addBannerApi(dataInfo)
								this.btnLoading = false
								if (code != 0) return
								uni.showModal({
									title: '编辑成功',
									content: '请等待列表的刷新',
									confirmText: '我知道咯',
									showCancel: false,
									success: (res) => {
										uni.$u.route({
											type: 'navigateBack'
										})
									}
								});
							}
						} catch (e) {
							this.btnLoading = false
							throw new Error(e)
						}
					} else {
						this.btnLoading = false
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100vw;
		height: 100vh;
		overflow: auto;
	}
</style>
